<template>
  <div class="find">
    <div class="find-title">
      <div class="title-l">
        <div class="box">
          <p class="title1" @click="shop">金币商城</p>
          <p class="tips">0元好物在这里</p>
        </div>
        <img
          src="https://cube.elemecdn.com/8/38/9c9aea0e856149083d84af3444b78jpeg.jpeg?x-oss-process=image/format,webp"
        />
      </div>
      <div class="title-r">
        <div class="r box1">
          <div class="box">
            <p class="title1" style="color:rgb(237, 102, 96)" @click="menoy">推荐有奖</p>
            <p class="tips">20元现金拿不停</p>
          </div>
          <img
            src="https://cube.elemecdn.com/5/72/7232274c3c1934861abb86ba32b7bjpeg.jpeg?x-oss-process=image/format,webp"
          />
        </div>
        <div class="r">
          <div class="box">
            <p class="title1">周边优惠</p>
            <p class="tips">领取口碑好卷</p>
          </div>
          <img
            src="https://cube.elemecdn.com/5/72/7232274c3c1934861abb86ba32b7bjpeg.jpeg?x-oss-process=image/format,webp"
          />
        </div>
      </div>
    </div>
    <div class="find-con">
      <section>
        <div class="activity-header">
          <span class="line left"></span>
          <van-icon name="good-job-o" />为你推荐
          <span class="line right"></span>
        </div>
        <p class="activity-sub-title">你的口味，我都懂得</p>
        <div class="con-list">
          <section class="conList-box" v-for="(item,index) in findcon" :key="index">
            <img class="recommend-2Mcp6" v-lazy="item.content_url" />
            <aside class="recommend-1NWp9">{{item.reson}}</aside>
            <div class="recommend-2_Rj-">
              <h4 class="recommend-3MjdR">{{item.name}}</h4>
              <div class="recommend-2wozE">{{item.business_info}} {{item.good}}</div>
            </div>
            <div class="recommend-2HWZI">
              <div class="price-1qtfb recommend-2lnd7">
                <span class="price-1bP9Q">
                  <i aria-hidden="true">¥</i>
                  <span>{{item.price}}</span>
                </span>
                <del aria-hidden="true" class="price-cQGHJ">
                  <i>¥</i>
                  <span>{{item.old_price}}</span>
                </del>
              </div>
            </div>
            <div class="recommend-1XTm_">
              <div class="recommend-evJyV">
                <van-icon name="shop-o" />
                <span>{{item.restaurant_name}}</span>
              </div>
            </div>
          </section>
        </div>
        <van-button type="default" class="btn" @click="getMore">{{text}}</van-button>
      </section>
      <section>
        <div class="activity-header">
          <span class="line left"></span>
          <van-icon name="underway-o" />限时好礼
          <span class="line right"></span>
        </div>
        <p class="activity-sub-title">金币换豪礼</p>
        <div class="activity-body">
          <a class="discover-food" v-for="item in findyh" :key="item.id">
            <img v-lazy="item.url" width="324" height="322" />
            <div>
              <p class="food-name ui-ellipsis">{{item.title}}</p>
              <div class="food-info clearfix">
                <div class="food-price">
                  <span class="price ui-ellipsis">
                    <span>{{item.points_required}}金币</span>
                  </span>
                  <del class="original-price ui-ellipsis">¥{{item.original_price}}</del>
                </div>
              </div>
            </div>
            <span class="discount">{{item.corner_marker}}</span>
          </a>
        </div>
        <van-button type="default" class="btn" @click="shop">查看更多</van-button>
      </section>
    </div>

    <!-- <find></find> -->
    <div class="tarbar">
      <van-tabbar v-model="active" fixed>
        <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
        <van-tabbar-item icon="browsing-history-o" to="/find">发现</van-tabbar-item>
        <van-tabbar-item icon="orders-o" to="/order">订单</van-tabbar-item>
        <van-tabbar-item icon="setting-o" to="/mine">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>
<script>
// import Find from '../../components/tabbar'
export default {
  data: () => ({
    active: 1,
    findcon: [],
    findyh: [],
    // 某一页
    pageindex: 0,
    // 如果不设置 默认每一页就是3条
    limit: 5,
    hasFlag: true
  }),
  created() {
    this.getFindcon();
    this.getFindyh();
  },
  methods: {
    async getFindcon() {
      if (this.hasFlag !== true) return;
      this.pageindex++;
      console.log(this.pageindex);
      const {
        data: { status, message, count }
      } = await this.$axios.get(
        `api/getfind2?pageindex=${this.pageindex}&limit=${this.limit}`
      );
      if (status !== 0) return this.$Toast(message);
      // this.findcon = message
      // 把上一页的数据和下一页的数据组合成一个新的数组
      this.findcon = this.findcon.concat(message);
      // 计算一个布尔值， 用于节流
      this.hasFlag = this.pageindex * this.limit < count;
      // console.log(message)
    },
    async getFindyh() {
      const {
        data: { status, message }
      } = await this.$axios.get("api/getfind3");
      if (status !== 0) return this.$Toast(message);
      this.findyh = message;
      // console.log(message)
    },
    getMore() {
      this.getFindcon();
    },
    menoy() {
      this.$router.push("/find/menoy");
    },
    shop() {
      this.$router.push("/mine/exchange");
    },
    Torder() {
      console.log(333);
    }
  },
  computed: {
    text() {
      return this.hasFlag !== true ? "被掏空了" : "加载更多";
    }
  },
  components:{
    // Find
  }
};
</script>
<style lang="less" scoped>
.find {
  overflow: hidden;
  margin-bottom: 50px;
  .find-title {
    background: #fff;
    border-top: 1px solid #ededed;
    height: 42.666667vw;
    display: flex;
    .title-l {
      padding: 5.866667vw 2.933333vw 1.6vw 4.266667vw;
      border-right: 1px solid #ededed;
      display: flex;
      justify-content: space-between;
      position: relative;
      img {
        width: 20vw;
        height: 20vw;
        max-width: 100%;
        margin-top: 68px;
      }
    }
    .title-r {
      width: 50%;
      display: flex;
      flex-direction: column;
      .r {
        display: flex;
        width: 100%;
      }
      div {
        padding: 1.866667vw 3.933333vw 0.6vw 1.266667vw;
        p:nth-child(1) {
          color: rgb(27, 169, 225);
        }
      }
      .box1 {
        border-bottom: 1px solid #ededed;
      }
      img {
        margin-top: 10px;
        width: 12vw;
        height: 12vw;
        margin-left: 10px;
      }
    }
    .box {
      height: 4.266667rem;
      .title1 {
        margin: 0;
        font-weight: 400;
        line-height: 1.2;
        font-size: 1.226667rem;
        margin-bottom: 0.16rem;
        margin-bottom: 1.6vw;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: rgb(255, 153, 0);
      }
      .tips {
        margin: 0;
        font-weight: 400;
        line-height: 1.2;
        font-size: 0.32rem;
        color: #999;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
  .find-con {
    background: #eee;
    padding-top: 20px;
    section {
      background: #fff;
      margin-bottom: 20px;
      overflow: hidden;
      .activity-header {
        padding-top: 5.2vw;
        text-align: center;
        font-size: 1.3rem;
        font-weight: 700;
        color: #333;
        .van-icon-good-job-o:before,
        .van-icon-underway-o:before {
          margin-right: 4px;
          color: palevioletred;
          font-size: 22px;
        }
        .line {
          display: inline-block;
          margin: 2.133333vw 0.933333vw 1.733333vw;
          border: 1px solid #333;
          width: 4vw;
          height: 0;
          position: relative;
        }
        .line:after {
          position: absolute;
          top: -0.666667vw;
          content: "";
          background: #333;
          height: 1.333333vw;
          width: 1.333333vw;
          border-radius: 50%;
        }
        .line.right:after {
          left: -0.666667vw;
        }
        .line.left:after {
          right: -0.666667vw;
        }
      }
      .activity-sub-title {
        font-size: 0.293333rem;
        color: #999;
        text-align: center;
        padding-bottom: 2.133333vw;
        margin: 0;
        font-weight: 400;
      }
      .con-list {
        padding: 0.6rem;
        display: flex;
        flex-wrap: wrap;
        flex: 1;
        justify-content: space-between;
        .conList-box {
          position: relative;
          width: 48%;
          .recommend-2Mcp6 {
            display: block;
            width: 4.6rem;
            width: 46vw;
            height: 4.6rem;
            height: 46vw;
          }
          .recommend-1NWp9 {
            position: absolute;
            top: 40.666667vw;
            left: 0;
            right: 0;
            height: 5.333333vw;
            line-height: 5.333333vw;
            text-align: center;
            font-size: 0.266667rem;
            color: #fff;
            width: 172px;
            background-color: rgba(0, 0, 0, 0.6);
          }
          .recommend-2_Rj- {
            // padding-top: 1.066667vw;
            .recommend-3MjdR {
              overflow: hidden;
              color: #333;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-weight: 700;
              font-size: 1.2rem;
            }
            .recommend-2wozE {
              margin-top: 0.8vw;
              color: #666;
              font-size: 0.266667rem;
            }
          }
          .recommend-2HWZI {
            padding-bottom: 0.8vw;
            display: flex;
            align-items: center;
            .price-1qtfb {
              display: flex;
              align-items: baseline;
              .price-1bP9Q {
                color: #ff6000;
                font-size: 1em;
              }
            }
            .price-cQGHJ {
              margin-left: 1.066667vw;
              color: #999;
              font-size: 0.65em;
            }
          }
          .recommend-1XTm_ {
            height: 8.8vw;
            border-top: 1px dashed #ccc;
            .recommend-evJyV {
              display: flex;
              flex: 1 1 auto;
              align-items: center;
              overflow: hidden;
              span {
                flex: 1 1 auto;
                overflow: hidden;
                margin-left: 1.6vw;
                color: #999;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 0.293333rem;
              }
            }
          }
          .recommend-1XTm_,
          .recommend-2_Rj-,
          .recommend-2HWZI {
            margin: 0 2.133333vw 0 2.666667vw;
          }
          .recommend-1XTm_,
          .recommend-2Nr2c {
            display: flex;
            align-items: center;
          }
        }
      }
      .btn {
        width: 100%;
      }
    }
    .activity-body {
      // padding: 3.2vw 0 4vw 4vw;
      padding: 0 3vw;
      margin-top: 3.2vw;
      white-space: nowrap;
      display: flex;
      overflow: hidden;
      flex: 1;
      flex-wrap: wrap;
      justify-content: space-between;
      // margin-bottom: 20px;
      .discover-food {
        // display: flex;
        position: relative;
        // box-sizing: border-box;
        width: 29.6vw;
        margin-right: 4vw;
        margin-bottom: 10px;
        width: 28%;
        img {
          width: 31.2vw;
          height: 29.333333vw;
          // margin-bottom: 2.533333vw;
        }
        .food-name {
          font-size: 0.346667rem;
          color: #333;
          margin-bottom: 1.333333vw;
        }
        .food-price {
          height: 6.4vw;
          line-height: 6.4vw;
          .price {
            font-size: 0.346667rem;
            height: 4.8vw;
            line-height: 4.8vw;
            color: #ff5339;
            margin-right: 0.933333vw;
            max-width: 13.333333vw;
            display: inline-block;
            vertical-align: middle;
          }
          .original-price {
            font-size: 0.293333rem;
            color: #aaa;
            max-width: 10.666667vw;
            display: inline-block;
            vertical-align: middle;
          }
        }
        .discount {
          position: absolute;
          top: 0;
          left: 0;
          font-size: 0.293333rem;
          color: #fff;
          background: #413d3c;
          padding: 0.666667vw;
        }
      }
      .clearfix:after,
      .clearfix:before {
        display: table;
        line-height: 0;
        content: "";
        clear: both;
      }
    }
  }
}
</style>